<template>
  <div v-if="commandmv && commandmv.length > 0" :class="['drawerClass', cname]">
    <h4>{{ title }}</h4>
    <div class="drawer-box">
      <div v-for="(item,index) in commandmv.slice(0,4)" :key="index" class="drawer-item">
        <nuxt-link to="/">
          <img :src="item.picUrl" :alt="item.picUrl" class="drawer-img">
          <p class="title">
            {{ item.name }}
          </p>
          <p>{{ item.copywriter }}</p>
        </nuxt-link>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    cname: {
      type: String,
      default: ''
    },
    title: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      loading: true,
      commandmv: [{
        'id': 10903306,
        'type': 5,
        'name': 'Frail State Of Mind',
        'copywriter': '编辑推荐：英伦摇滚乐团实力演绎宅男在家的一天',
        'picUrl': 'http://p2.music.126.net/_fkHGDI4X3ThjJlXXz0yOw==/109951164502826432.jpg',
        'canDislike': false,
        'trackNumberUpdateTime': null,
        'duration': 245000,
        'playCount': 12229,
        'subed': false,
        'artists': [{
          'id': 104457,
          'name': 'The 1975'
        }],
        'artistName': 'The 1975',
        'artistId': 104457,
        'alg': 'featured'
      },
      {
        'id': 10902277,
        'type': 5,
        'name': '你早就知道',
        'copywriter': '编辑推荐：糖果色调的绚丽美好营造出最单纯的甜蜜味道',
        'picUrl': 'http://p2.music.126.net/tqcUXEakq95eqYPnVs9Jjw==/109951164499400718.jpg',
        'canDislike': false,
        'trackNumberUpdateTime': null,
        'duration': 213000,
        'playCount': 35019,
        'subed': false,
        'artists': [{
          'id': 1193417,
          'name': '于朦胧'
        }],
        'artistName': '于朦胧',
        'artistId': 1193417,
        'alg': 'featured'
      },
      {
        'id': 10902581,
        'type': 5,
        'name': '이루리 (As You Wish) | SBS人气歌谣 19/11/24 现场版',
        'copywriter': '最新热门MV推荐',
        'picUrl': 'http://p2.music.126.net/rKPwQRYErWXaIqeNILQyYg==/109951164508391875.jpg',
        'canDislike': true,
        'trackNumberUpdateTime': null,
        'duration': 202000,
        'playCount': 3976,
        'subed': false,
        'artists': [{
          'id': 1193531,
          'name': '宇宙少女'
        }],
        'artistName': '宇宙少女',
        'artistId': 1193531,
        'alg': 'hot_server'
      },
      {
        'id': 10902580,
        'type': 5,
        'name': 'OOPSIE (My Bad) | SBS人气歌谣 19/11/24 现场版',
        'copywriter': '最新热门MV推荐',
        'picUrl': 'http://p2.music.126.net/IG9CT-I6uz48cgT2Q1qzlA==/109951164508392336.jpg',
        'canDislike': true,
        'trackNumberUpdateTime': null,
        'duration': 203000,
        'playCount': 455,
        'subed': false,
        'artists': [{
          'id': 28391358,
          'name': 'NATURE'
        }],
        'artistName': 'NATURE',
        'artistId': 28391358,
        'alg': 'hot_server'
      }]
    }
  },
  mounted () {
    setTimeout(() => {
      this.loading = false
    }, 5000)
  }
}
</script>

<style  lang="scss" scoped>
.drawerClass {
  width: 100%;
  position: relative;
  h4 {
    width: calc(100% - 16px);
    height: 36px;
    margin: 0 auto;
    line-height: 40px;
    font-size: 16px;
    font-weight: 600;
    border-bottom: 1PX solid rgba(0,0,0,.1);
    box-sizing: border-box;
  }
  .drawer-more {
    position: absolute;
    top: 10px;
    right: 10px;
  }
  .drawer-box {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding-left: 2px;
    padding-right: 2px;
    .drawer-item {
      width: 50%;
      padding: 6px;
      box-sizing: border-box;
      a {
        width: 100%;
        img {
          border-radius: 6px;
          box-sizing: border-box;
        }
        p {
          width: 100%;
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
          font-size: 12px;
          color: #999;
        }
        .title {
          color: #000;
          font-size: 14px;
        }
      }
    }
  }
}
</style>
